.page-content.container-fluid
  h3.mt-0 Horizontal
  .row
    .col-md-6
      .widget
        .widget-heading
          h3.widget-title Basic
        .widget-body
          .progress.progress-sm
            .progress-bar(role='progressbar', data-transitiongoal='25')
          .progress.progress-sm
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.progress-sm
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.progress-sm
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.progress-sm
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
    .col-md-6
      .widget
        .widget-heading
          h3.widget-title Right
        .widget-body
          .progress.progress-sm.right
            .progress-bar(role='progressbar', data-transitiongoal='25')
          .progress.progress-sm.right
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.progress-sm.right
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.progress-sm.right
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.progress-sm.right
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.progress-sm.right
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
  .row
    .col-md-6
      .widget
        .widget-heading
          h3.widget-title With Label
        .widget-body
          .progress.progress-sm
            #progress-bar-1.progress-bar.progress-bar-primary(role='progressbar', data-transitiongoal='75')
          .progress
            #progress-bar-2.progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='75')
          .progress.progress-lg
            #progress-bar-3.progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='75')
    .col-md-6
      .widget
        .widget-heading
          h3.widget-title Size
        .widget-body
          .progress.progress-xs
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
          .progress.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
          .progress
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
          .progress.progress-lg
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
  .row
    .col-md-6
      .widget
        .widget-heading
          h3.widget-title Animated
        .widget-body
          .progress.progress-striped.progress-sm.active
            .progress-bar.progress-bar-striped(role='progressbar', data-transitiongoal='25')
          .progress.progress-striped.progress-sm.active
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.progress-striped.progress-sm.active
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.progress-striped.progress-sm.active
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.progress-striped.progress-sm.active
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.progress-striped.progress-sm.active
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
    .col-md-6
      .widget
        .widget-heading
          h3.widget-title Striped
        .widget-body
          .progress.progress-striped.progress-sm
            .progress-bar(role='progressbar', data-transitiongoal='25')
          .progress.progress-striped.progress-sm
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.progress-striped.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.progress-striped.progress-sm
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.progress-striped.progress-sm
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.progress-striped.progress-sm
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
  h3 Vertical
  .row
    .col-sm-6.col-md-4
      .widget
        .widget-heading
          h3.widget-title Basic
        .widget-body(style='height: 400px')
          .progress.vertical.progress-sm
            .progress-bar(role='progressbar', data-transitiongoal='25')
          .progress.vertical.progress-sm
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.vertical.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.vertical.progress-sm
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.vertical.progress-sm
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.vertical.progress-sm
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
      .widget
        .widget-heading
          h3.widget-title Bottom
        .widget-body(style='height: 400px')
          .progress.vertical.bottom.progress-sm
            .progress-bar(role='progressbar', data-transitiongoal='25')
          .progress.vertical.bottom.progress-sm
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.vertical.bottom.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.vertical.bottom.progress-sm
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.vertical.bottom.progress-sm
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.vertical.bottom.progress-sm
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
    .col-sm-6.col-md-4
      .widget
        .widget-heading
          h3.widget-title With Label
        .widget-body(style='height: 400px')
          .progress.vertical.progress-sm
            #progress-bar-4.progress-bar.progress-bar-primary(role='progressbar', data-transitiongoal='75')
          .progress.vertical
            #progress-bar-5.progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='75')
          .progress.vertical.progress-lg
            #progress-bar-6.progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='75')
      .widget
        .widget-heading
          h3.widget-title Size
        .widget-body(style='height: 400px')
          .progress.vertical.progress-xs
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
          .progress.vertical.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
          .progress.vertical
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
          .progress.vertical.progress-lg
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='60')
    .col-sm-6.col-md-4
      .widget
        .widget-heading
          h3.widget-title Striped
        .widget-body(style='height: 400px')
          .progress.vertical.progress-striped.progress-sm
            .progress-bar(role='progressbar', data-transitiongoal='25')
          .progress.vertical.progress-striped.progress-sm
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.vertical.progress-striped.progress-sm
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.vertical.progress-striped.progress-sm
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.vertical.progress-striped.progress-sm
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.vertical.progress-striped.progress-sm
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')
      .widget
        .widget-heading
          h3.widget-title Animated
        .widget-body(style='height: 400px')
          .progress.vertical.progress-striped.progress-sm.active
            .progress-bar.progress-bar-striped(role='progressbar', data-transitiongoal='25')
          .progress.vertical.progress-striped.progress-sm.active
            .progress-bar.progress-bar-success(role='progressbar', data-transitiongoal='40')
          .progress.vertical.progress-striped.progress-sm.active
            .progress-bar.progress-bar-info(role='progressbar', data-transitiongoal='55')
          .progress.vertical.progress-striped.progress-sm.active
            .progress-bar.progress-bar-purple(role='progressbar', data-transitiongoal='70')
          .progress.vertical.progress-striped.progress-sm.active
            .progress-bar.progress-bar-warning(role='progressbar', data-transitiongoal='85')
          .progress.vertical.progress-striped.progress-sm.active
            .progress-bar.progress-bar-danger(role='progressbar', data-transitiongoal='100')